<template>
    <view class="content">
        <view v-for="item in eventList" :key="item.id">
            <view class="box" @click="goToOne(1,item.id)">
                <view class="u-body-item u-flex">
                    <view class="main">
                        <view class="title u-line-2">{{ item.siteTitle }}</view>
                        <!--                    <view class="brief u-line-2">浙南（平阳）抗日根据地旧址
                    瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半
                    </view> -->
                        <view class="footer">
                            <view class="siteauthor">{{item.siteAuthor}} </view>
                            <view class="sitetime">{{item.updateTime}}</view>
                        </view>

                    </view>

                    <image
                        :src="filePath+item.cover"
                        mode="aspectFill" @error="error(index)"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { getEvents, getSites } from "../../api/data.js"
    import { FIlE_PATH } from "../../common/index.js"
    export default {
        props:{
            eventtype: Number
        },
        data() {
            return {
                eventList:[],
                filePath:'',
            }
        },
        mounted() {
            // if(this.eventtype==1){
                this.getSiteList()
            // }
            // console.log(this.eventtype)
            
            this.filePath=FIlE_PATH
        },
        methods: {
            goToOne(type,id) {
                console.log(id)
                uni.navigateTo({
                    url: '/pages/articles/index?id='+id+'&type='+type,
                });

            },
            getEventList() {
                const _this = this
                getEvents().then(function (res){
                    _this.eventList=res.data.data
                    console.log(_this.eventList)
                })
            },
            getSiteList() {
                const _this = this
                getSites().then(function (res){
                    _this.eventList=res.data.data
                    // console.log(_this.siteList)
                })
            },
            error(index) {
                // console.log(index)
                this.eventList[index]['cover'] = this.src 
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        width: 720rpx;
        margin: 0 auto;
    }

    .box {
        padding: 30rpx;
        // margin-top: 30rpx;
        margin-top: 20rpx;
        background: #fff;
        border: 3rpx solid #ddd;
        border-radius: 20rpx;
    }

    .u-body-item {
        // font-size: 28rpx;
        color: #424242;
    }

    .u-body-item image {
        width: 220rpx;
        flex: 0 0 40%;
        height: 200rpx;
        border-radius: 8rpx;
        margin-left: 12rpx;
    }

    .title {
        font-size: 38rpx;
        font-weight: bold;
        margin-bottom: 30rpx;
        height: 120rpx;
        color: #515151;
        letter-spacing: 5rpx;
        // height: 60%;
        // width: 70%;

    }

    .brief {
        font-size: 28rpx;
        color: #8e8e8e;
        margin-bottom: 10rpx;
    }

    .footer {

        // font-size: 30rpx;
        // color: #747474;
        .siteauthor {
            display: inline-block;
            font-size: 30rpx;
            color: #5a5a5a;
        }

        .sitetime {
            display: inline-block;
            font-size: 28rpx;
            color: #747474;
            margin-left: 20rpx;
        }

        // height: 20%;
    }

    .main {
        flex: 0 0 60%;
    }
</style>

